<template>
    <div class="countBox">
        <div class="title">
            <p>预约渠道数据统计</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <!-- 图形图表的容器 -->
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
let charts = ref()
let option = {
    color: ['rgba(245, 166, 35, 1)', 'rgba(19, 173, 255, 1)'],
    legend: {
        show: true,
        icon: 'circle',
        bottom: 0,
        center: 0,
        itemWidth: 4,
        itemHeight: 4,
        textStyle: {
            fontSize: 14,
            color: '#ade3ff'
        },
        data: ['当前园区', '园区平均值'],
    },
    radar: [{
        indicator: [{
            text: '美团',
            max: 100
        }, {
            text: '携程旅行',
            max: 100
        }, {
            text: '美团优选',
            max: 100
        }, {
            text: '飞猪旅行',
            max: 100
        }, {
            text: '去哪儿旅行',
            max: 100
        }],
        textStyle: {
            color: 'red'
        },
        center: ['50%', '50%'],
        radius: 90,
        startAngle: 90,
        splitNumber: 4,
        shape: 'circle',
        name: {
            formatter: '{value}',
            textStyle: {
                fontSize: 15,
                color: '#ffffff'
            }
        },
        splitArea: {
            areaStyle: {
                color: ['transparent',
                    'transparent)', 'rgba(114, 172, 209, 0)',
                    'transparent', 'rgba(114, 172, 209, 0)'
                ],
            }
        },
        axisLine: {
            lineStyle: {
                color: '#2770ab'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#2770ab'
            }
        }
    },],
    series: [{
        name: '雷达图',
        type: 'radar',
        itemStyle: {
            emphasis: {
                lineStyle: {
                    width: 4
                }
            }
        },
        data: [{
            name: '园区平均值',
            value: [50, 50, 50, 50, 50],
            areaStyle: {
                normal: {
                    color: 'rgba(245, 166, 35, 0.4)'
                }
            },
            symbolSize: 2.5,
            itemStyle: {
                normal: {
                    borderColor: 'rgba(245, 166, 35, 1)',
                    borderWidth: 2.5,
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            }
        }, {
            name: '当前园区',
            value: [30, 60, 55, 60, 70],
            symbolSize: 2.5,
            itemStyle: {
                normal: {
                    borderColor: 'rgba(19, 173, 255, 1)',
                    borderWidth: 2.5,
                }
            },
            areaStyle: {
                normal: {
                    color: 'rgba(19, 173, 255, 0.5)'
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            }
        }]
    },]
}
onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption(option)
})
</script>

<style lang="scss" scoped>
.countBox {
    background: url(../../images/dataScreen-main-rb.png) no-repeat;
    background-size: cover;

    .title {
        p {
            color: white;
            font-size: 20px;
        }
    }

    .charts {
        height: 260px;
    }
}
</style>